import { useNavigate } from 'react-router-dom';
import './AssessmentView.css';

const mockResults = [
  {
    name: '严重抑郁症',
    match: '高匹配',
    severity: '非常严重',
    progress: 0.9,
    color: '#E87C3D',
  },
  {
    name: '广泛性焦虑症（GAD）',
    match: '高匹配',
    severity: '非常严重',
    progress: 0.85,
    color: '#E87C3D',
  },
  {
    name: '躁郁症',
    match: '中等匹配',
    severity: '缓和',
    progress: 0.5,
    color: '#7B61FF',
  },
  {
    name: '强迫症（OCD）',
    match: '中等匹配',
    severity: '缓和',
    progress: 0.45,
    color: '#7B61FF',
  },
  // 新增：创伤后应激障碍（PTSD）
  {
    name: '创伤后应激障碍（PTSD）',
    match: '低匹配',
    severity: '低至轻度',
    progress: 0.18,
    color: '#A6B97A', // 绿色
  },
  // 新增：社交焦虑症（社交恐惧症）
  {
    name: '社交焦虑症（社交恐惧症）',
    match: '低匹配',
    severity: '低至轻度',
    progress: 0.12,
    color: '#A6B97A', // 绿色
  },
];

const AssessmentView = () => {
  const navigate = useNavigate();
  // 这里可以用 location.state?.analysisResult 代替 mockResults
  const patientInfo = {
    age: 18,
    gender: '女性',
    activeSymptoms: 8,
  };

  // 返回按钮处理
  const handleBack = () => {
    navigate(-1);
  };

  return (
    <div className="assessment-view-container">
      {/* 顶部状态栏 */}
      <div className="status-bar">
        <span className="time">9:41</span>
        <div className="icons">
          <span className="signal">●●●</span>
          <span className="wifi">●</span>
          <span className="battery">●</span>
        </div>
      </div>

      {/* 头部区域 */}
      <div className="assessment-header">
        <button className="back-button" onClick={handleBack}>
          {/* 返回箭头 */}
          <span className="back-arrow">◀</span>
        </button>
        <div className="header-title">
          <h1>您可能的症状</h1>
          <p className="subtitle">KOTO，这是符合您所选症状的条目</p>
        </div>
      </div>

      {/* 患者信息卡片 */}
      <div className="patient-card">
        <div className="patient-info">
          <div className="patient-icon">⚙️</div>
          <div className="patient-details">
            <div className="symptom-count">{patientInfo.activeSymptoms} 活跃症状</div>
            <div className="patient-age-gender">
              {patientInfo.age}岁 · {patientInfo.gender}
            </div>
          </div>
        </div>
        <button className="edit-button">✏️</button>
      </div>

      {/* 结果标题 */}
      <div className="results-header">
        <h2>所有结果</h2>
        <div className="highest-match">
          最高匹配 <span className="up-arrow">⬆</span>
        </div>
      </div>

      {/* 结果卡片列表 */}
      <div className="results-list">
        {mockResults.map((item, idx) => (
          <div className="result-card" key={idx}>
            <div className="result-main">
              <div className="result-title">{item.name}</div>
              <span className="result-arrow">›</span>
            </div>
            <div className="result-progress-bar">
              <div
                className="result-progress"
                style={{ width: `${item.progress * 100}%`, background: item.color }}
              ></div>
            </div>
            <div className="result-info">
              <span className="result-match">{item.match}</span>
              <span className="result-severity">
                <span className="result-severity-icon">⚠️</span>
                {item.severity}
              </span>
            </div>
          </div>
        ))}
      </div>

      {/* 底部按钮区域 */}
      <div className="bottom-actions">
        <button className="action-button ghost-button">
          <span className="icon">👤</span>
        </button>
        <button className="action-button primary-button">
          <span className="icon">💬</span>
        </button>
      </div>
    </div>
  );
};

export default AssessmentView; 